<template>
  <div class="requestKeepDetail">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">存酒请求审批详情</x-header>
    <div class="topHolder"></div>
    <box gap="1rem 0.8rem">
      <step v-if="requestKeepInfo.flow != null" v-model="requestKeepInfo.flow.step" background-color='#fbf9fe'>
        <step-item v-for="(item,index) in requestKeepInfo.flow.node" :key="index" :title="item" :description="'step' + (index+1)"></step-item>
      </step>
    </box>
    <card>
      <div class="card-padding state" slot="content">
        <i class="iconfont" :class="[stateClass,stateTextClass]"></i>
        <br/>
        <span class="stateText">状态：<b :class="[stateTextClass]" v-text="stateText"></b><!--，当前审批人：<span v-text="requestKeepInfo.AUDITOR + ' - ' + requestKeepInfo.auditor_DEPARTMENT"></span>--></span>
      </div>
    </card>
    <group label-width="6em">
      <cell title="存酒服务员" :value="requestKeepInfo.KEEPER + ' - ' + requestKeepInfo.keeper_DEPARTMENT"></cell>
      <cell title="发起请求时间" :value="requestKeepInfo.DATETIME"></cell>
      <cell title="实际存酒客户" :value="requestKeepInfo.actualKeeper_NAME?requestKeepInfo.actualKeeper_NAME + '（电话：' + requestKeepInfo.actualKeeper_PHONE + '）':'（电话：' + requestKeepInfo.actualKeeper_PHONE + '）'"></cell>
      <cell title="存酒备注" :value="requestKeepInfo.REMARK"></cell>
    </group>
    <group-title v-if="requestKeepInfo.IS_CUSTOMER == 0"><div style="color:red;text-align: center;font-size: 1.2rem;">注：存酒人不是当前订单的消费者<br/>（办卡人、预订客户和订单客户）</div></group-title>
    <group-title v-if="hasNoCurrent"><div style="color:red;text-align: center;font-size: 1.2rem;">注：本次存酒有非当台酒水</div></group-title>
    <group title="存酒关联订单详情：" label-width="6em">
      <cell title="订单单号" inline-desc="点击查看订单详情" class="number" :value="requestKeepInfo.ORDER_NUMBER" :is-link="showLink" :link="orderLink"></cell>
      <cell title="存酒房台号" :value="requestKeepInfo.AREA + ' - ' + requestKeepInfo.NUMBER + '（' + requestKeepInfo.ROOM_PLATFORM_TYPE + '）'"></cell>
      <cell title="客户名称" :value="requestKeepInfo.CUSTOMER_NAME"></cell>
      <cell title="订单客户" v-if="requestKeepInfo.orderUser != null && requestKeepInfo.orderUser.orderCustomer != null" :value="requestKeepInfo.orderUser.orderCustomer.name?requestKeepInfo.orderUser.orderCustomer.name + '（电话：' + requestKeepInfo.orderUser.orderCustomer.phone + '）':'（电话：' + requestKeepInfo.orderUser.orderCustomer.phone + '）'"></cell>
      <cell title="预订客户" v-if="requestKeepInfo.orderUser != null && requestKeepInfo.orderUser.subscriber != null" :value="requestKeepInfo.orderUser.subscriber.name?requestKeepInfo.orderUser.subscriber.name + '（电话：' + requestKeepInfo.orderUser.subscriber.phone + '）':'（电话：' + requestKeepInfo.orderUser.subscriber.phone + '）'"></cell>
      <span v-if="requestKeepInfo.orderUser != null && requestKeepInfo.orderUser.cardApplyers != null && requestKeepInfo.orderUser.cardApplyers.length > 0">
        <cell :title="'办卡人' + (index+1) + ''" v-for="(item,index) in requestKeepInfo.orderUser.cardApplyers" :key="index" :value="item.name?item.name + '（电话：' + item.phone + '）':'（电话：' + item.phone + '）'"></cell>
      </span>
      <cell title="手动填写存酒人" v-if="requestKeepInfo.orderUser != null && requestKeepInfo.orderUser.fillingKeeper != null" :value="requestKeepInfo.orderUser.fillingKeeper.name?requestKeepInfo.orderUser.fillingKeeper.name + '（电话：' + requestKeepInfo.orderUser.fillingKeeper.phone + '）':'（电话：' + requestKeepInfo.orderUser.fillingKeeper.phone + '）'"></cell>
    </group>
    <group title="存酒明细" class="keepDetaillist">
      <cell-box v-for="(item,index) in requestKeepInfo.detailList" :key="index">
        <div class="item">
          <h4 class="title">
            <span v-text="item.NAME"></span>
          </h4>
          <div class="info">
            (<span v-text="'单价：¥ '+ formatCurrency(item.PRICE) +'元'"></span>，
            <span v-text="item.QUANTITY + item.UNIT"></span>，<span style="color: #0086b3;" v-if="item.WHOLE == 1">整支</span>
            <span style="color: #0abd39;" v-if="item.WHOLE == 0">单支，剩余：<span v-text="item.SCALE"></span>CM</span>)
          </div>
          <div class="expire">
            过期时间：<span v-text="item.EXPIRE_DATETIME"></span>
          </div>
          <span class="current yes" v-if="item.IS_CURRENT == 1">当前台位</span>
          <span class="current no" v-if="item.IS_CURRENT == 0">非当前台位</span>
        </div>
      </cell-box>
      <cell-box v-if="JSON.stringify(requestKeepInfo) != '{}' && requestKeepInfo.detailList.length <= 0">
        <div class="listNoItem">暂无存酒明细</div>
      </cell-box>
    </group>
    <box gap="1rem 0.8rem">
      <div class="btnArea">
        <x-button v-if="!requestKeepInfo.IS_AUDITOR" :disabled="false" text="已审批"></x-button>
        <div class="btnAreaWrap" v-if="requestKeepInfo.STATE == 0 && requestKeepInfo.IS_AUDITOR">
          <x-button @click.native="submit(true)" type="primary" :show-loading="loadingStatus" :disabled="loadingStatus" text="同意存酒" class="inlineBtn"></x-button>
        </div>
        <div class="btnAreaWrap" v-if="requestKeepInfo.STATE == 0 && requestKeepInfo.IS_AUDITOR">
          <x-button @click.native="submit(false)" type="warn" :show-loading="loadingStatus" :disabled="loadingStatus" text="不同意存酒" class="inlineBtn"></x-button>
        </div>
      </div>
    </box>
  </div>
</template>

<script>
  import {GroupTitle, Group, Cell, Card, Box, CellBox, XButton, Step, StepItem, numberComma } from 'vux'
  import {getKeepDetail, submitAuditKeep} from "../../api";
  import {message,toDecimal2} from "../../common/util";

  export default {
    name:'requestKeepDetail',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:false,
        paramKeepId:this.$route.params.keepId,
        requestKeepInfo:{},
        hasNoCurrent:false,
        stateText:'',
        stateClass:'',
        stateTextClass:'',
        showLink:false,
        orderLink:'',
        step:0
      }
    },
    components:{
      GroupTitle,
      Group,
      Cell,
      Card,
      Box,
      CellBox,
      XButton,
      Step,
      StepItem
    },
    computed:{
      authority(){
        return this.$store.getters.getAuthorityNotice
      }
    },
    methods:{
      formatCurrency(number){
        return numberComma(toDecimal2(number))
      },
      checkCurrent(){
        for(let item of this.requestKeepInfo.detailList){
          if(item.IS_CURRENT == 0) this.hasNoCurrent = true
        }
      },
      getState(state){
        switch (state) {
          case 0:this.stateText = '审批中';this.stateClass = 'icon-dengluchaoshi';this.stateTextClass = 'waiting';break
          case 1:this.stateText = '审批同意';this.stateClass = 'icon-chenggong1';this.stateTextClass = 'agree';break
          case 2:this.stateText = '审批不同意';this.stateClass = 'icon-shibai  ';this.stateTextClass = 'disagree';break
          default:this.stateText = '无状态';this.stateClass = '';this.stateTextClass = '';break
        }
      },
      submit(agreeOrNot){
        this.loadingStatus = true
        let agreeText = agreeOrNot?'同意':'不同意'
        this.$vux.confirm.show({
          title:'是否确认操作',
          content:'【' + agreeText + '】审批操作？',
          onCancel: ()=> {
            this.loadingStatus = false
          },
          onConfirm: ()=> {
            let reqParams = {
              keepId:this.paramKeepId,
              agreeOrNot:agreeOrNot
            }
            submitAuditKeep(reqParams).then((res)=>{
              if(res.status == 'success'){
                message({message:'您已同意审批',type:'info'})
                this.$router.push({path:'/requestKeepList'})
              }else if(res.status == 'error') {
                message({message:res.msg,type:'error'})
                console.log('submitAuditKeep error info:', res.msg)
              }
              this.loadingStatus = false
            }).catch((err)=>{console.log('submitAuditKeep catch info:',err)})
          }
        })
      }
    },
    mounted(){
      if(this.authority.keep == 'keep_audit'){
        getKeepDetail(this.paramKeepId).then((res)=>{
          if(res.status == 'success'){
            this.requestKeepInfo = res.data
            this.checkCurrent()
            this.getState(res.data.audit_STATE)
            this.showLink = true
            this.orderLink = {name:'订单详情',params:{orderId:this.requestKeepInfo.ORDER_ID}}
            this.loadingStatus = false
          }else if(res.status == 'error') {
            message({message:res.msg,type:'error'})
            console.log('getKeepDetail error info:', res.msg)
          }
          this.$store.commit('updateLoadingStatus',{isLoading:false})
        }).catch((err)=>{console.log('getKeepDetail catch info:',err)})
      }else{
        message({message:'没有权限查看该页面',type:'error'})
        this.$router.push({path:'/noticeIndex'})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .requestKeepDetail{
    .state{
      text-align: center;
      .iconfont{
        font-size: 5rem;
        &.waiting{color: #ffca10;}
        &.agree{color: #0abd39;}
        &.disagree{color: #ff2623;}
      }
      .stateText{
        display:inline-block;margin-top: 1rem;
        b{
          &.waiting{color: #ffca10;}
          &.agree{color: #0abd39;}
          &.disagree{color: #ff2623;}
        }
      }
    }
    .keepDetaillist{
      .item{
        font-size:1rem;display: block;padding:0.4rem 0;line-height: 1.3rem;width:100%;position: relative;
        .title{width:70%;margin-bottom: 0.6rem;font-size:1rem; }
        .info{margin-bottom: 0.4rem;font-size:0.9rem;}
        .current{
          font-size:0.9rem;padding:0.1rem 0.6rem;color:#fff;border-radius: 0.3rem;position: absolute;right:0;top:0.3rem;
          &.yes{background: #45cd4e;}
          &.no{background: #ff0300;}
        }
      }
    }
    .btnArea{
      display:flex;margin: 1rem 0;text-align: center;
      .btnAreaWrap{width:50%;}
      button{width:90%;margin: 0 5%;height: 2.6rem;font-size: 1.2rem;}
    }
  }
</style>
